<template>
	<view class="container">
		<view class="header">门店详情</view>
		<view class="message-list">
			<image class="store-image" src="/static/whb/youhui2.jpg" mode="aspectFill"></image>
			<view class="store-info">
				<view class="info-header">
					<view class="store-title">中国石油加油站（解放路店）</view>
					<image src="/static/whb/phone.jpg" class="phone-icon-top"></image>
				</view>
				<view class="business-time">
					<text>营业时间：周一至周日 早上8:00-晚上22:00</text>
				</view>
				<view class="store-location">
					<text class="location-text">位置：山阳区人民路与解放路交叉口</text>
					<image src="/static/whb/plane@3x.png" class="location-icon"></image>
				</view>
			</view>

			<view class="price-section">
				<view class="price-title">油价详情</view>
				<view class="price-list">
					<view class="price-item">
						<text class="gas-type">92#</text>
						<text class="price">￥5.86/L</text>
					</view>
					<view class="price-item">
						<text class="gas-type">95#</text>
						<text class="price">￥5.86/L</text>
					</view>
					<view class="price-item">
						<text class="gas-type">98#</text>
						<text class="price">￥5.86/L</text>
					</view>
					<view class="price-item">
						<text class="gas-type">0#</text>
						<text class="price">￥5.86/L</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const storeInfo = ref({})

</script>

<style>
	.container {
		height: 200px;
		background-color: #007AFF;
	}

	.header {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
	}

	.message-list {
		background-color: white;
		margin: 30px 10px 0 10px;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.store-image {
		width: calc(100% - 40rpx);
		height: 400rpx;
		object-fit: cover;
		border-radius: 5rpx;
		margin: 20rpx;
	}

	.store-info {
		padding: 30rpx;
	}

	.info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.store-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.phone-icon-top {
		width: 100rpx;
		height: 100rpx;
	}

	.business-time {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.store-location {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.price-section {
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.price-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.price-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.price-item:last-child {
		border-bottom: none;
	}

	.gas-type {
		font-size: 30rpx;
		color: #333;
	}

	.price {
		font-size: 30rpx;
		color: #FF6B00;
	}



	.phone-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>